<div class="alarm-list alarm-flex" (window:resize)="onResize($event)">
  <div class="progress-bar" *ngIf="isShowBar"></div>
  <!-- (window:resize)="onResize($event)" -->
  <!--广东部分取消报警/告警分类，暂时注释掉  -->
  <!-- <header class="alarm-main-header">
    <span (click)="onAlarmCategoryClick(alarmCategory)" *ngFor="let alarmCategory of alarmCategoryDatas" [ngClass]="{ on: alarmCategory.isChecked }">
{{alarmCategory.alarmCategoryName}}
</span>
  </header>  -->
  <header class="alarm-main-header">
    <span (click)=onClickHeader(0) [ngClass]="{on:active==0}">
      历史报警
    </span>
    <span (click)=onClickHeader(1) [ngClass]="{on:active==1}">
      报警统计
    </span>
  </header>
  <!--历史报警  [rows]="row"-->
  <section class="alarm-full alarm-main-content" *ngIf="active==0">
    <section class="alarm-main-fault alarm-flex" *ngFor="let alarmCategory of alarmCategoryDatas; let i=index" [ngClass]="{'alarm-hide':!alarmCategory.isChecked}">
      <section class="alarm-full alarm-table" id="alarmTable" #alarmTable>
        <p-dataTable
          [value]="alarmCategory?.faultTableData"
          [sortField]="sortFault" [sortOrder]="sortFO" (onSort)="changeFaultSort($event)"
          [rows]="pageSize" [paginator]="true"  [totalRecords]="alarmCategory?.faultLength">
          <p-column field="faultCode" header="故障码" [sortable]="true">
            <ng-template let-col let-data="rowData" pTemplate="body">
              <span [style.background]="data.faultLevelColor">{{ data[col.field] }}</span>
            </ng-template>
          </p-column>
          <p-column field="faultTime" header="开始时间" [sortable]="true"></p-column>
          <p-column field="faultEndTime" header="结束时间" [sortable]="true"></p-column>
          <p-column field="faultLevelName" header="等级" [sortable]="true"></p-column>
          <p-column field="desc" header="描述" [sortable]="true"></p-column>
          <p-column field="components" header="类别" [sortable]="true"></p-column>
        </p-dataTable>
      </section>
      <footer class="alarm-list-footer alarm-footer scrollbar">
        <div class="alarm-level">
          <span class="alarm-title">报警等级</span>
          <span>
            <label class="form-label" *ngFor="let faultLevel of alarmCategory.faultLevelTotals">
              <span class="check-box" [ngStyle]="{'background': faultLevel.faultLevelColor}">
                <input type="checkbox" [(ngModel)]="faultLevel.isChecked" (click)="onClickLevel($event.target, faultLevel, alarmCategory)">
                <span class="check"></span>
              </span>
              <span>{{faultLevel.faultLevelName}}</span>
              <span>(<span>{{ faultLevel.faultLevelCount }}</span>)</span>
          </label>
          </span>
        </div>
        <div class="alarm-category">
          <span class="alarm-title">报警类别</span>
          <span class="turb-span">
            <label class="form-label-turb" *ngFor="let turbComponent of alarmCategory.turbComponentTotals">
              <span class="check-box">
                <input type="checkbox" type="checkbox" [(ngModel)]="turbComponent.isChecked" (click)="onClickTurbComponent($event.target, turbComponent, alarmCategory)">
                <span class="check"></span>
          </span>
          <span>{{ turbComponent.turbComponentName }}</span>
          <span>(
                <span>{{ turbComponent.turbComponentCount }}</span>)</span>
          </label>
          </span>
        </div>
      </footer>

    </section>

  </section>
  <!--报警统计 [rows]="rowC" -->
  <section class="alarm-main-content alarm-full" *ngIf="active==1">
    <section class="alarm-main-fault alarm-flex" *ngFor="let alarmCategory of alarmCategoryDatas; let i=index" [ngClass]="{'alarm-hide':!alarmCategory.isChecked}">
      <section class="alarm-full alarm-table" id="countTable" #countTable>
        <p-dataTable [value]="alarmCategory?.faultCounts" [sortField]="sortF" [sortOrder]="sortO" (onSort)="changeSort($event)" [rows]="pageSize"
          [paginator]="true" [totalRecords]="alarmCategory?.faultCountLength">
          <p-column field="farmName" header="风场"></p-column>
          <p-column field="deviceName" header="设备"></p-column>
          <p-column field="faultCode" header="故障码">
            <ng-template let-col let-data="rowData" pTemplate="body">
              <span [style.background]="data.faultLevelColor">{{ data[col.field] }}</span>
            </ng-template>
          </p-column>
          <p-column field="faultDesc" header="故障描述">
            <ng-template let-col let-data="rowData" pTemplate="body">
              <span style="display:inline-block; width:100%; overflow:hidden; padding:0" [title]="data[col.field]">{{data[col.field]}}</span>
            </ng-template>
          </p-column>
          <p-column field="faultCount" header="报警次数" [sortable]="true"></p-column>
          <p-column field="faultWorkTime" header="持续时间(h)" [sortable]="true"></p-column>
        </p-dataTable>
      </section>
    </section>
  </section>
</div>
